<template>
  <el-card>
    <el-form :inline="true" class="search_el_form">
      <el-form-item label="一级分类" class="search_el_form_item">
        <el-select
          placeholder="请选择一级分类"
          class="search_el_select"
          v-model="categoryStore.category1Id"
          :disabled="scene !== 0"
          @change="handlerChange1"
        >
          <el-option
            v-for="item in categoryStore.category1Arr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" class="search_el_form_item">
        <el-select
          placeholder="请选择二级分类"
          class="search_el_select"
          v-model="categoryStore.category2Id"
          :disabled="scene !== 0"
          @change="handlerChange2"
        >
          <el-option
            v-for="item in categoryStore.category2Arr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类" class="search_el_form_item">
        <el-select
          placeholder="请选择三级分类"
          class="search_el_select"
          v-model="categoryStore.category3Id"
          :disabled="scene !== 0"
        >
          <el-option
            v-for="item in categoryStore.category3Arr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
// 引入组件
import { onMounted } from 'vue'
// 引入分类相关的仓库
import useCategoryStore from '@/store/modules/category'

// 获取分类相关的仓库
let categoryStore = useCategoryStore()

// 接收父组件传递过来的数据
defineProps(['scene'])

// 组件挂载完毕时获取一级分类的数据
onMounted(() => {
  getCategory1()
})

// 获取一级分类的数据
const getCategory1 = () => {
  categoryStore.getCategory1()
}

// 监听一级分类的变化的处理回调
const handlerChange1 = () => {
  // 一级分类发生变化的时候首先要清空二级和三级分类的数据
  categoryStore.category2Arr = []
  categoryStore.category2Id = ''
  categoryStore.category3Arr = []
  categoryStore.category3Id = ''
  categoryStore.getCategory2()
}

// 监听二级分类的变化的处理回调
const handlerChange2 = () => {
  // 二级分类发生变化的时候首先要清空三级分类的数据
  categoryStore.category3Arr = []
  categoryStore.category3Id = ''
  categoryStore.getCategory3()
}
</script>

<style scoped>
.search_el_select {
  width: 250px;
}
.search_el_form {
  display: flex;
  justify-content: center;
}
.search_el_form_item {
  margin: 10px 70px;
}
</style>
